<template>
	<view class="callRedcord-card" @click="onClick">
		<view class="callRedcord-card-wrapper-head">
			<view span="10" class="left">
				<span class="time">
					报修时间 {{data.createTime}}
				</span>
			</view>

			<view span="2" class="right" :style="[StateStyle]">
				<span class="state">
					{{ data.type | Text }}
				</span>
			</view>
		</view>
		<view class="callRedcord-card-wrapper-title">
			<h5>
				{{data.phone || '-'}}
			</h5>
		</view>
		<view class="callRedcord-card-wrapper-body">
			<view span="11" class="left">
				<ul class="callRedcord-info">
					<li class="callRedcord-info-item">
						<span class="callRedcord-info-item-label">报修科室</span>
						<span class="callRedcord-info-item-value">{{data.deptIdToName || '-'}}</span>
					</li>
					<li class="callRedcord-info-item">
						<span class="callRedcord-info-item-label">报修人</span>
						<span class="callRedcord-info-item-value">{{data.user || '-'}}</span>
					</li>

				</ul>
			</view>
		</view>

		<view class="callRedcord-card-wrapper-bottom" v-show="ShowButton">
			<HButton :key="data.id" size="small" :block="false" plain @click="onPlayer(data.recording)">播放录音</HButton>
		</view>
	</view>
</template>

<script>
	// 通话记录卡片  
	import HButton from '@/components/button/index.vue'
	import HAudio from '@/common/audio.js'
	import { State } from '@/pagesCallRecords/state.js'
	export default {

		name: 'InspectionCard',
		filters: {
			Text(type) {
				console.log(type, 'type');
				if (State[type]) {
					return State[type].text
				}
				return ''
			}
		},
		computed: {
			ShowButton() {
				return this.code == 'pickedUp'
			},
			StateStyle() {
				if (State[this.data.type]) {
					return State[this.data.type].style
				}
				return ''
			}
		},
		components: {
			HButton
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			},
			code: {
				type: String,
				default: ''
			}

		},

		data() {
			return {}
		},

		methods: {

			onPlayer(src) {
				let audio = new HAudio(src)
				audio.play()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.callRedcord {

		&-card {
			width: 100%;
			background-color: #fff;
			margin-top: 30rpx;
			box-shadow: 0 30rpx 18rpx -14rpx #E6EBF2;
			border-radius: 20rpx;
			overflow: hidden;

			&-wrapper {
				&-head {
					height: 68rpx;
					line-height: 68rpx;
					border-bottom: 2rpx solid #F5F7FA;
					display: flex;

					>.left {
						flex: 1;
						text-align: left;
						padding-left: 20rpx;

						>.time {
							font-weight: 400;
							font-size: 28rpx;
							color: #98A5B3;
						}
					}



					>.right {
						text-align: center;
						width: 20%;
						flex-basis: 20%;

						>.state {
							font-weight: 600;
							font-size: 28rpx;
						}

					}
				}

				&-title {
					padding-left: 20rpx;
					font-weight: 600;
					font-size: 34rpx;
					color: #0F2E4D;
					margin: 30rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&-body {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					padding-left: 20rpx;

					>.left {
						width: 90%;
						flex-basis: 90%;
					}

					>.right {
						flex: 1;
						align-items: center;
						display: flex;
						justify-content: center;
						padding-bottom: 60rpx;
					}
				}

				&-bottom {
					padding-right: 20rpx;
					text-align: right;
					margin-bottom: 30rpx;
				}

			}

		}

		&-info {
			&-item {
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;

				&-label {
					font-weight: 400;
					font-size: 28rpx;
					color: #98A5B3;
					width: 120rpx;
					flex-basis: 120rpx;

				}

				&-value {
					font-weight: 400;
					font-size: 28rpx;
					margin-left: 20rpx;
					color: #0F2E4D;
					flex: 1;
				}
			}
		}
	}
</style>
